<template>
    <div class="roles">
        <el-row>
            <el-col :span="24">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/rights' }">权限管理</el-breadcrumb-item>
                    <el-breadcrumb-item>角色列表</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>
        <el-button plain>添加角色</el-button>

        <el-table
            class="mt-15"
            v-loading="loading"
            border
            :data="roleList"
            style="width: 100%">
            <el-table-column type="expand" width="50">
            <template slot-scope="scope">
                <el-row v-for="firstChildren in scope.row.children" :key="firstChildren.id">
                    <el-col :span="4">
                        <el-tag closable @close="deleteRight(scope.row,firstChildren.id)">{{firstChildren.authName}}</el-tag>
                        <i class="el-icon-arrow-right" v-if="firstChildren.children.length !== 0"></i>
                    </el-col>
                    <el-col :span="20">
                        <el-row v-for="secondChildren in firstChildren.children" :key="secondChildren.id">
                            <el-col :span="4">
                                <el-tag closable type="success" @close="deleteRight(scope.row,secondChildren.id)">{{secondChildren.authName}}</el-tag>
                                <i class="el-icon-arrow-right" v-if="secondChildren.children.length !== 0"></i>
                            </el-col>
                            <el-col :span="20">
                                <el-tag closable type="warning" v-for="thirdChildren in secondChildren.children" :key="thirdChildren.id" @close="deleteRight(scope.row,thirdChildren.id)">{{thirdChildren.authName}}</el-tag>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row v-if="scope.row.children.length === 0">
                    <el-col :span="24">该角色没有分配权限，请前往分配！</el-col>
                </el-row>
            </template>
            </el-table-column>
            
            <el-table-column
            label="角色名称"
            prop="roleName"
            width="150">
            </el-table-column>
            <el-table-column
            label="描述"
            prop="roleDesc"
            width="130">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope" width="180">
                    <el-button type="primary" plain size="mini" icon="el-icon-edit" ></el-button>
                    <el-button type="danger" plain size="mini"  icon="el-icon-delete" ></el-button>
                    <el-button type="warning" plain size="mini" icon="el-icon-check" title="角色授权" @click="showDialog(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="角色授权" :visible.sync="dialogVisible">
            <div class="tree-container">
                <el-tree
                :data="rightList"
                show-checkbox
                node-key="id"
                ref="tree"
                :default-expand-all='true'
                :default-checked-keys="selectedRights"
                :props="defaultProps">
                </el-tree>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitGrant">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {getRolesList,deleteRoleRight,grantRoleRight,getRightList} from '@/api'
export default {
    data() {
        return {
            loading:true,
            roleList:[],
            dialogVisible:false,
            rightList:[],
            selectedRights:[],//保存被选中的权限id
            currentRole:{},//保存当前选择的角色
            defaultProps: {
                children: 'children',
                label: 'authName'
            }
        }
    },
    created(){
        this.initRoleList()
    },
    methods:{
        initRoleList(){
            this.loading = true
            getRolesList().then(res => {
                console.log(res);
                if(res.meta.status === 200){
                    this.roleList = res.data
                    this.loading = false
                }
            })
        },
        deleteRight(row,rightId){
            deleteRoleRight({roleId:row.id,rightId:rightId}).then(res => {
                console.log(res);
                if(res.meta.status === 200){
                    row.children = res.data
                }else{
                    this.$message({
                    type: 'error',
                    message: res.meta.msg
                    })
                }
            })
        },
        //角色授权显示框显示
        showDialog(row){
            this.dialogVisible = true
            this.currentRole = row
            getRightList('tree').then(res => {
                console.log(res);
                if(res.meta.status === 200) {
                    this.rightList = res.data
                }
                
            })
            //清空数组
            this.selectedRights.length = 0
            //显示当前用户的权限（默认被选中）：点击角色授权获取到当前点击角色的所拥有的权限数据row.children，获取到所有权限id，把获取到的id放进selectedRights中，
            this.currentRole.children.forEach(first => {
                if(first.children && first.children.length !== 0){
                    first.children.forEach(second => {
                        if(second.children && second.children.length !== 0){
                            second.children.forEach(third => {
                                this.selectedRights.push(third.id)
                            })
                        }
                    });
                }
            });

        },
        //提交授权
        submitGrant(){
            let rids = this.$refs.tree.getCheckedKeys().join(",")
            console.log(rids);
            
            grantRoleRight({roleId:this.currentRole.id,rids:rids}).then(res => {
                console.log(res);
                if(res.meta.status === 200){
                    this.$message({
                        type: 'success',
                        message: res.meta.msg
                    })
                    this.dialogVisible = false
                    this.initRoleList()
                }
            })
        }
       
    }
}
</script>
<style lang="scss" scoped>
.roles {
    .el-tag {
        margin-right: 5px;
        margin-bottom: 5px;
    }
    .tree-container {
        height: 300px;
        overflow:auto;
    }
}
</style>